<template>
  <div>
    <el-tabs v-model="activeName" type="border-card" class="demo-tabs">
      <el-tab-pane label="样式设置" name="first">
        <CommonTitleOptions
          colorLabel="姓名字体颜色"
          fontSizeLabel="姓名字体大小"
          fontWeightLabel="姓名字体粗细"
        ></CommonTitleOptions>
        <!-- 公共部分 -->
        <Common></Common>
      </el-tab-pane>
      <!-- 数据配置 -->
      <el-tab-pane label="数据配置" name="second">
        <el-form label-width="70px" label-position="left">
          <el-form-item label="姓名:">
            <el-input
              v-model="modelItem.data.name"
              type="text"
              maxlength="15"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="简介:">
            <el-input
              v-model="modelItem.data.abstract"
              type="textarea"
              maxlength="50"
              show-word-limit
              :rows="4"
            />
            <el-switch v-model="modelItem.data.isShow.abstract" />
          </el-form-item>
          <el-form-item label="年龄:">
            <el-input
              v-model="modelItem.data.age"
              type="text"
              maxlength="2"
              show-word-limit
            />
            <el-switch v-model="modelItem.data.isShow.age" />
          </el-form-item>
          <el-form-item label="地址:">
            <el-input
              v-model="modelItem.data.address"
              type="text"
              maxlength="30"
              show-word-limit
            />
            <el-switch v-model="modelItem.data.isShow.address" />
          </el-form-item>
          <el-form-item label="工作经验:">
            <el-input
              v-model="modelItem.data.workService"
              type="text"
              maxlength="10"
              show-word-limit
            />
            <el-switch v-model="modelItem.data.isShow.workService" />
          </el-form-item>
          <el-form-item label="联系方式:">
            <el-input
              v-model="modelItem.data.phoneNumber"
              type="text"
              maxlength="11"
              show-word-limit
            />
            <el-switch v-model="modelItem.data.isShow.phoneNumber" />
          </el-form-item>
          <el-form-item label="邮箱地址:">
            <el-input
              v-model="modelItem.data.email"
              type="text"
              maxlength="30"
              show-word-limit
            />
            <el-switch v-model="modelItem.data.isShow.email" />
          </el-form-item>
          <el-form-item label="头像上传:">
            <el-upload
              class="avatar-uploader"
              action=""
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
            <el-switch v-model="modelItem.data.isShow.avatar" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import CommonTitleOptions from '@/options/CommonTitleOptions.vue'
import Common from '@/options/Common.vue'
import selectModelItem from '@/hooks/selectModel.ts' //当前选中模块
const modelItem = selectModelItem()
const activeName = ref('first')

// 头像设置
const imageUrl = ref(modelItem.data.avatar)
const beforeAvatarUpload: any = (rawFile: any) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('只支持jpg格式的图片')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  // 图片转成base64
  let reader = new FileReader()
  reader.readAsDataURL(rawFile)
  //文件读取成功时触发
  reader.onload = (e) => {
    console.log(e.target)
    console.log(reader.result)
    //  imageUrl.value = reader.result
    // modelItem.data.avatar = reader.result
    imageUrl.value = e.target?.result as string
    modelItem.data.avatar = e.target?.result as string
  }
  return false
}
</script>
<style lang="scss" scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
:deep(.el-input) {
  width: 80%;
  height: 27px;
  line-height: 27px;
  margin-right: 2px;
}

:deep(.el-form-item__label) {
  font-size: 13px;
}

:deep(.el-tabs--border-card) {
  border: 0;
}
:deep(.el-textarea) {
  width: 80%;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
